import { createRouter, createWebHistory, createWebHashHistory } from "vue-router";
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: "/",
      name: "home",
      component: () => import("../router用法/Home.vue"),
      meta: {}
    },
    {
      path: "/about",
      name: "about",
      component: () => import("../router用法/About.vue"),
      children: [
        {
          path: "",
          name:'msg',
          component: () => import("../router用法/AboutMsg.vue"),
          meta: {}
        },

        {
          path: "shops",
          name:'shops',
          component: () => import("../router用法/AboutShops.vue"),
          meta: {}
        }
      ]
    },
    {
      path: "/login",
      name: "login",
      component: () => import("../router用法/login.vue"),
      meta: {}
    },
    {
      path: "/:pathMatch(.*)*",
      name: "NoFind",
      component: () => import("../router用法/NoFind.vue"),
      meta: {}
    }
  ],
});

const catgery = {
  path: "/CatGery",
  name: 'CatGery',
  component: () => import("../router用法/CatGery.vue"),
  meta: {}
}
const goods = {
  path: "goods",
  name: 'goods',
  component: () => import("../router用法/AboutGoods.vue"),
  meta: {}
}
//动态添加一级路由
router.addRoute(catgery)
//动态添加二级路由，第一个参数是父级路由name的值，第二个参数是子路由
router.addRoute('about', goods)
//通过路由中的name值删除路由
//router.removeRoute('about')
router.beforeEach((to, from) => {
  //return的返回值
  // 1.return false取消导航跳转
  // 2.不写return, 或者return undefined或者return true这3中情况都是会导航跳转
  // 3.return '/login'跳转到login页面
  // 4.return {path:'/home',query:{...}}带有参数跳转页面
  if (to.path!=='/login') {
    const token = localStorage.getItem('token')
    if (!token) {
       return '/login'
      //return '/login?name=111'
      //return { path: '/login', query: {name:'111'} }
    }
  }
})
export default router;
